<!doctype html>
<html ng-app>
    <head>
	<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
	
	<script src="../jquery/jquery-1.8.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
        <script src="../scripts/angular-1.2.5.min.js"></script>
    </head>
    <body class="container">
	<div ng-include="'header.html'"></div>
		<div ng-controller="watchCtrl">
			<div ng-click="changeSize()" style="width:100px;height:100px;background-color:red">Hello</div>
			<div>{{w}} - {{h}}</div>
			<div>
				<input type="text" ng-model="w" />
				<input type="text" ng-model="h" />
			</div>
		</div>
		<div ng-controller="menuCtrl">
		<ul class ="nav nav-pills">
			<li ng-repeat="m in menus">
				<a data-url="{{m.url}}" href ng-click="changeLink($event.target)" 
				data-toggle="tab" >{{m.title}}</a>
			</li>
			<div ng-include="url" class="focus">
			...
			</div>
		</ul>
		</div>
		<script>
			function menuCtrl($scope,$http,$element){
				$http.get("menu.json")
				.success(function(result){
					$scope.menus=result;
					$scope.url=result[0].url;
				});
				$scope.changeLink=function(target){
					$scope.url = $(target).attr("data-url");
				};
			}
			function watchCtrl($scope,$element){
				var d = $element.children().eq(0);
				//alert(e.html());
				$scope.w=d.width();
				$scope.h=d.height();
				$scope.$watch("w",function(to,from){
					d.width(to);
				});
				$scope.$watch("h",function(to,from){
					d.height(to);
				});
				$scope.changeSize=function(){
					$scope.w+=10;
					$scope.h=parseInt($scope.h)+10;
				};
			}
		</script>
	<div ng-include="'footer.html'"></div>
    </body>
</html>